<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>协同调度信息系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .welcome-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            padding: 50px;
            text-align: center;
            max-width: 800px;
            width: 90%;
        }
        .welcome-header h1 {
            color: #333;
            font-weight: 700;
            margin-bottom: 20px;
        }
        .welcome-header p {
            color: #666;
            font-size: 1.2rem;
            margin-bottom: 40px;
        }
        .role-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 40px 0;
        }
        .role-card {
            background: white;
            border-radius: 15px;
            padding: 30px 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
            border: 3px solid transparent;
        }
        .role-card:hover {
            transform: translateY(-10px);
        }
        .role-card.recon { border-color: #28a745; }
        .role-card.analyst { border-color: #17a2b8; }
        .role-card.decision { border-color: #ffc107; }
        .role-card.executor { border-color: #dc3545; }
        
        .role-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 24px;
            color: white;
        }
        .recon .role-icon { background: #28a745; }
        .analyst .role-icon { background: #17a2b8; }
        .decision .role-icon { background: #ffc107; color: #333; }
        .executor .role-icon { background: #dc3545; }
        
        .role-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: #333;
        }
        .role-desc {
            color: #666;
            font-size: 0.9rem;
            line-height: 1.5;
        }
        .btn-login {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 10px;
            padding: 15px 40px;
            font-size: 1.1rem;
            font-weight: 600;
            color: white;
            text-decoration: none;
            display: inline-block;
            transition: transform 0.3s ease;
        }
        .btn-login:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
            color: white;
        }
        .system-features {
            margin-top: 40px;
            text-align: left;
        }
        .feature-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            padding: 10px;
            background: rgba(102, 126, 234, 0.1);
            border-radius: 10px;
        }
        .feature-icon {
            width: 40px;
            height: 40px;
            background: #667eea;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="welcome-container">
        <div class="welcome-header">
            <h1><i class="fas fa-shield-alt"></i> 协同调度信息系统</h1>
            <p>基于角色的协同作战信息管理平台</p>
        </div>

        <div class="role-cards">
            <div class="role-card recon">
                <div class="role-icon">
                    <i class="fas fa-search"></i>
                </div>
                <div class="role-title">侦察员</div>
                <div class="role-desc">
                    负责信息收集和侦察数据提交，为后续分析提供基础数据支撑
                </div>
            </div>
            
            <div class="role-card analyst">
                <div class="role-icon">
                    <i class="fas fa-chart-line"></i>
                </div>
                <div class="role-title">分析员</div>
                <div class="role-desc">
                    对侦察数据进行深度分析，识别威胁和机会，提供决策建议
                </div>
            </div>
            
            <div class="role-card decision">
                <div class="role-icon">
                    <i class="fas fa-gavel"></i>
                </div>
                <div class="role-title">决策员</div>
                <div class="role-desc">
                    基于分析结果制定作战计划，下达指令并协调各角色协同作战
                </div>
            </div>
            
            <div class="role-card executor">
                <div class="role-icon">
                    <i class="fas fa-cogs"></i>
                </div>
                <div class="role-title">执行员</div>
                <div class="role-desc">
                    执行决策员下达的指令，完成任务并反馈执行结果
                </div>
            </div>
        </div>

        <div class="system-features">
            <h4 style="text-align: center; margin-bottom: 30px; color: #333;">
                <i class="fas fa-star"></i> 系统特性
            </h4>
            
            <div class="feature-item">
                <div class="feature-icon">
                    <i class="fas fa-users"></i>
                </div>
                <div>
                    <strong>角色分工明确</strong><br>
                    <small>四种角色各司其职，形成完整的作战链条</small>
                </div>
            </div>
            
            <div class="feature-item">
                <div class="feature-icon">
                    <i class="fas fa-sync-alt"></i>
                </div>
                <div>
                    <strong>信息流转顺畅</strong><br>
                    <small>从侦察到执行的信息传递和反馈机制</small>
                </div>
            </div>
            
            <div class="feature-item">
                <div class="feature-icon">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <div>
                    <strong>权限控制严格</strong><br>
                    <small>基于角色的访问控制，确保信息安全</small>
                </div>
            </div>
            
            <div class="feature-item">
                <div class="feature-icon">
                    <i class="fas fa-history"></i>
                </div>
                <div>
                    <strong>全程可追溯</strong><br>
                    <small>完整的操作日志和审计跟踪</small>
                </div>
            </div>
        </div>

        <div style="margin-top: 40px;">
            <a href="{{ url_for('login') }}" class="btn-login">
                <i class="fas fa-sign-in-alt"></i> 立即登录
            </a>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>